<!--
 * @Author: 黄宇/Hyuishine
 * @Date: 2022-05-16 15:08:03
 * @LastEditors: 徐伟杰
 * @LastEditTime: 2022-10-20 16:08:18
 * @Description: 
 * @Email: hyuishine@gmail.com
 * @Company: 3xData
 * @youWant: 技术服务机构=>从业人员基本信息
-->

<template>
  <!-- 单位基本信息 -->
  <view class="collapsePane">
    <!-- 字段标题 -->
    <view class="title"
          @click="status = !status">
      从业人员基本信息
      <view :class="status ? 'cuIcon-unfold':'cuIcon-right'" />
    </view>

    <!-- 折叠中的内容 -->
    <view class="pane"
          :class="status ? 'unfold' : 'fold'">
      <!-- 表单字段内容 -->
      <view class="card_form scrollPane">
        <!-- 板块标题 -->
        <view class="partTitle">从业人员统计</view>

        <!-- 单行表单项  -->
        <view class="formItem">
          <!-- 字段标题 -->
          <view class="label">注册消防工程师</view>

          <!-- 输入区域 -->
          <template>
            <input class="content"
                   disabled
                   v-model="people1"
                   placeholder="'请输入注册消防工程师'" />
          </template>
        </view>

        <view class="formItem">
          <!-- 字段标题 -->
          <view class="label">消防设施操作人员</view>

          <!-- 输入区域 -->
          <template>
            <input class="content"
                   disabled
                   v-model="people2"
                   placeholder="'请输入消防设施操作人员'" />
          </template>
        </view>
        <!-- 下方的人员信息 -->
        <view class="partTitle">从业人员明细</view>
        <view class="peopleBar"
              v-for="(item, index) in list"
              :key="index"
              @click="navTo(item)">
          <view class="peopleInfo">
            <view class="peopleName">{{ item.name }}</view>
            <view class="job">{{ item.registeredFireEngineer || item.facilityOperators }}</view>
          </view>
          <view class="cuIcon-right" />
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import ScrollViewY from "@/components/scrollViewY/index.vue";
export default {
  components: { ScrollViewY },
  name: "staffInfo",
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    people1: {
      type: Number,
      default: 0
    },
    people2: {
      type: Number,
      default: 0
    }
  },
  computed: {
    getPeople: function () {
      let dist = 0;
      return dist;
    },
  },
  data () {
    return {
      status: false, // true为开启
      getPeoPle: 0,
      formBuild: [
        { label: "从业人员统计", type: "partTitle" },
        {
          label: "注册消防工程师",
          prop: "registeredFireEngineerCount",
          type: "input",
          require: true,
          disabled: false,
        },
        {
          label: "消防设施操作人员",
          prop: "name",
          type: "input",
          require: true,
          disabled: false,
        },
      ],
    };
  },
  methods: {
    navTo (list) {
      uni.navigateTo({
        url: '/pages_workTableChild/agency/foldForm/PractiTioners?id=' + list.staffId
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.peopleBar {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 2rpx solid #ddd;
  &:active {
    background-color: white;
  }

  .peopleInfo {
    flex: 1;
    view:first-child {
      font-size: 30rpx;
      font-weight: bold;
    }
    view:last-child {
      font-size: 24rpx;
      color: #999;
    }
  }
  view[class*="cuIcon-"] {
    width: inherit;
  }
}
</style>
